<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- v-if 条件成立时显示，不成立则直接被移除掉 -->
        <!-- v-if 具备惰性，如果条件不成立的时候默认是不会显示出来 -->
        <h1 v-if="num == 1">num 的值是 1</h1>
        <!-- 条件判断的时候，中间不能有多余的标签，否则会导致判断失效 -->
        <!-- <br> -->
        <h1 v-else-if="num == 2">num 的值是 2</h1>
        <h1 v-else-if="num == 3">num 的值是 3</h1>
        <h1 v-else>num 的值不知道是几 </h1>


        <button @click="isShow = !isShow">切换 isShow</button>

        <!-- 虽然可以实现，但是需要写太多遍，所以不太建议使用 -->
        <!-- <h1 v-if="isShow">这是 h1 标签</h1>
        <h2 v-if="isShow">这是 h2 标签</h2>
        <h3 v-if="isShow">这是 h3 标签</h3>
        <h4 v-if="isShow">这是 h4 标签</h4>
        <h5 v-if="isShow">这是 h5 标签</h5>
        <h6 v-if="isShow">这是 h6 标签</h6> -->


        <!-- 虽然外面套一个 div 可以实现多内容显示隐藏，但是会多出的一个 div 标签，也不推荐使用 -->
        <!-- <div v-if="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </div> -->

        <!-- template 是一个空标签，不会被渲染到页面中的标签 -->
        <template v-if="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </template>


        <hr>
        <!-- v-show 也可以实现标签的显示和隐藏，通过 display: none; 实现显示隐藏 -->
        <h1 v-show="isShow">你好世界</h1>
        <!-- 因为 template 是一个空标签，所以这个标签将不会被渲染，那么所以我发使用 css 样式 -->
        <!-- 因为 template 不会渲染，所以不能再 template 上使用 v-show -->
        <template v-show="isShow">
            <h1>这个是 h1</h1>
            <h2>这个是 h2</h2>
            <h3>这个是 h3</h3>
            <h4>这个是 h4</h4>
            <h5>这个是 h5</h5>
            <h6>这个是 h6</h6>
        </template>

        <!-- 
            v-if:
                通过添加移除一个元素进行显示隐藏
                具有惰性，默认条件不成立的时候，不会被渲染
                不频繁切换显示的时候可以使用 v-if

            v-show:
                通过 CSS 样式实现显示隐藏
                非惰性的，不管默认条件是否成立，都会被渲染出来
                当需要频繁的切换显示的时候可以使用 v-show （性能会更好）

            同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
            因为两个的优先级不同
            在 Vue3 中 v-if 优先级更高
            在 Vue2 中 v-for 优先级更高            
         -->

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                num: 1,
                isShow: true
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>